<!DOCTYPE html>
<html lang="zh-CCN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Root管理员控制面板</title>
  <link rel="stylesheet" href="./../../static/root/css/style.css">
  <script defer src="./../../static/root/js/root.js"></script>
</head>
<body>
  <!-- 顶部导航栏 -->
  <header class="navbar">
    <div class="logo">RootAdmin</div>
    <h1>系统管理 - Root管理员</h1>
    <div class="user-info">
      <img src="admin-avatar.jpg" alt="Admin Avatar" class="avatar">
      <span>Root管理员</span>
      <button class="logout-btn" id="logout-btn">退出</button>
    </div>
  </header>

  <!-- 侧边导航栏 -->
  <aside class="sidebar">
    <ul>
      <li><a href="root-management.html">用户管理</a></li>
      <li class="menu-item">
        <!-- 一级菜单 -->
        <a href="#" class="menu-header">基础数据管理</a>
        <!-- 二级菜单 -->
        <ul class="submenu">
          <li><a href="activity-category.html">活动分类管理</a></li>
          <li><a href="class-type-management.html">教学班类型管理</a></li>
        </ul>
      </li>
    </ul>
  </aside>

  <!-- 主内容区域 -->
  <main>
    <!-- 用户管理 -->
    <section class="user-management" id="user-management">
      <h2>用户管理</h2>
      <div class="search-box">
        <input type="text" id="search-user" placeholder="搜索用户...">
        <button id="search-btn">搜索</button>
        <button id="add-user-btn">新增用户</button> <!-- 新增按钮放在搜索框旁边 -->
      </div>
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>用户名</th>
            <th>角色</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody id="user-table-body">
          <!-- 用户数据将动态加载 -->
        </tbody>
      </table>
    </section>
  </main>

  <!-- 新增/编辑用户弹窗 -->
  <div id="user-modal" class="modal">
    <div class="modal-content">
      <span id="close-modal" class="close">&times;</span>
      <h2 id="modal-title">新增用户</h2>
      <form id="user-form">
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username" required>

        <label for="role">角色:</label>
        <input type="text" id="role" name="role" required>

        <button type="submit" id="save-user-btn">保存</button>
        <button type="button" id="cancel-btn">取消</button> <!-- 取消按钮 -->
      </form>
    </div>
  </div>

  <!-- 底部信息 -->
  <footer class="footer">
    <p>© 2024 RootAdmin, All Rights Reserved</p>
    <a href="/help">帮助</a> | <a href="/contact">联系我们</a>
  </footer>
</body>
</html>
